<!DOCTYPE html>
<uieip type="page" value="login" debug="true" timeout="5000"></uieip>
<uieip type="reg" value="console,model"></uieip>
<html>

<head>
    <uieip type="file" value="inc" src="/yqwin/easyui/include.txt" cache="true" minute="1440"></uieip>
    <uieip type="file" value="css" src="/yqwin/css/yqwin.min" cache="false"></uieip>
    <uieip type="file" value="js" src="/yqwin/src/yqwin.min" cache="false"></uieip>
    <uieip type="tmpl" value="model.title"></uieip>
</head>

<body style="margin: 0;">
    <table>
        <tr>
            <td style=" padding: 0px; margin: 0px; ">
                <table id="tb_app" style="width:100%;height: 350px;"></table>
            </td>
            <td style=" padding: 0px 0px 0px 2px; margin: 0px; ">
                <div id="div_org"></div>
            </td>
        </tr>
    </table>

    <script>
        <uieip type="tmpl" value="model.params"></uieip>
        $(function () {
            main_fun.init();
        });
        const page_fun = {
            // 最小窗口尺寸
            MIN_WIDTH: 700,
            MIN_HEIGHT: 400,
            // 右侧组织树宽度
            ORG_WIDTH: 400,

            init() {
                // 绑定窗口大小改变事件
                $(window).on('resize', () => this.onresize());
                this.onresize();
                main_fun.seek();
            },

            onresize() {
                // 获取并限制窗口尺寸
                const width = Math.max(window.innerWidth, this.MIN_WIDTH);
                const height = Math.max(window.innerHeight, this.MIN_HEIGHT);

                // 计算左侧表格宽度
                const gridWidth = Math.max(width - this.ORG_WIDTH, this.ORG_WIDTH);

                // 调整两个组件大小
                main_fun.resize({
                    width: gridWidth,
                    height
                });

                org_fun.resize({
                    width: this.ORG_WIDTH - 3,
                    height
                });
            }
        };

        const main_fun = {
            $grid() {
                return $("#tb_app");
            },

            init() {
                const opts = $.extend(_app, {
                    linkField: ["name"],
                    loadData: false,
                    afterBindingTitle: () => page_fun.init(),
                    afterSetdata: (data) => {
                        org_fun.load()
                    },
                    onClickRow: (index, row) => {
                        if (!row) {
                            org_fun.save_enable(false);
                            org_fun.check(null);
                            return;
                        }
                        org_fun.save_enable(true);
                        org_fun.check(row.orgs);
                    },
                    onBeforeShowEdit: (titles, action, row, callback) => {
                        for (var i = 0; i < titles.length; i++) {
                            if (titles[i].name == "app_id") {
                                titles[i].ui_mask.funcCallback = function (prevent_e, mdiinfo, callback) {
                                    $.yqConfirm("提示", "确定重建app_id...", function (r) {
                                        callback(r, main_fun.get_app_id());
                                    });
                                };
                                titles[i].ui_mask.beforeClear = function (callback) {
                                    $.yqConfirm("提示", "确定清除...", function (r) {
                                        callback(r);
                                    });
                                };
                            } else if (titles[i].name == "app_secret") {
                                titles[i].ui_mask.funcCallback = function (prevent_e, mdiinfo, callback) {
                                    $.yqConfirm("提示", "确定重建app_secret...", function (r) {
                                        callback(r, main_fun.get_app_secret());
                                    });
                                };
                                titles[i].ui_mask.beforeClear = function (callback) {
                                    $.yqConfirm("提示", "确定清除...", function (r) {
                                        callback(r);
                                    })
                                };
                            }
                        }
                        if (action === 'add') {
                            row.app_id = main_fun.get_app_id();
                            row.app_secret = main_fun.get_app_secret();
                            row.status = 0;
                        }
                        callback(true, titles, row);
                    }
                });
                this.$grid().yqDataGrid(opts);
            },
            resize: function (size) {
                this.$grid().yqDataGrid("resize", size);
            },
            get_row: function () {
                return this.$grid().yqDataGrid("getSelected");
            },
            seek: function (where) {
                if (where === undefined) {
                    where = "";
                }
                this.$grid().yqDataGrid("seek", where);
            },
            get_app_id: function () {
                return this.uuid();
            },
            get_app_secret: function () {
                return "yq-" + this.uuid();
            },
            uuid: function () {
                return 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'.replace(/[x]/g, c =>
                    (Math.random() * 16 | 0).toString(16)
                );
            },
            upp: function (row) {
                this.$grid().yqDataGrid("dataAction", [{
                    action: "upp",
                    row: row
                }]);
            },
        };

        const org_fun = {
            running: false,
            init: false,
            binding: false,

            $tree() {
                return $("#div_org");
            },

            load: function () {
                if (this.running) return;
                this.running = true;

                if (this.init) {
                    this.load_data();
                    return;
                }
                this.init = true;

                var opts = $.extend(_org, {
                    btnMini: false, //按钮最小化
                    isEdit: false, //可编辑
                    copy: false,
                    addroot: false,
                    add: false,
                    append: false,
                    upp: false,
                    del: false,
                    isdel: false, //可注销
                    isdelEdit: false, //注销是否可编辑
                    state: false,   //可状态编辑
                    wflock: false,        //可流程控制
                    move: false, //可移动
                    cut: false,
                    initData: false,
                    checkbox: true,
                    editLinks: [{
                        id: "save",
                        text: "保存",
                        iconCls: "yqwin-btn-icon-sub fa fa-floppy-o",
                        onClick: () => {
                            const row = main_fun.get_row();
                            if (!row) return;

                            const nodes = this.$tree().yqTree("getChecked");
                            const lists = nodes
                                .filter(node => node.checked)
                                .map(node => ({
                                    sid: node.attributes.sid,
                                    pid: node.attributes.pid,
                                    checked: true
                                }));

                            // 处理父子节点关系
                            lists.forEach(item => {
                                lists.forEach(subItem => {
                                    if (item.sid === subItem.pid) {
                                        subItem.checked = false;
                                    }
                                });
                            });

                            // 生成ID列表
                            const checkedIds = lists
                                .filter(item => item.checked)
                                .map(item => item.sid)
                                .join(',');

                            if (checkedIds) {
                                row.orgs = checkedIds;
                            } else {
                                delete row.orgs;
                            }

                            main_fun.upp(row);
                            //console.log("save", lists, ids, row)
                        }
                    }],  //显示的链接菜单
                    afterBindingTitle: () => {
                        this.save_enable(false);
                        this.init = true;
                        this.load_data();
                    },
                    afterSetdata: (data) => {
                        const nodes = this.$tree().yqTree("getRoots");
                        nodes.forEach(node => this.$tree().yqTree("expand", node.id));
                        this.running = false;
                    },
                });

                this.$tree().yqTree(opts);
            },
            load_data: function () {
                page_fun.onresize();

                if (this.binding) {
                    this.running = false;
                    return;
                }
                this.binding = true;

                this.$tree().yqTree("loadData");
            },
            resize: function (size) {
                if (!this.init) return;
                this.$tree().yqTree("resize", size);
            },
            save_enable: function (enabled) {
                if (!this.init) return;
                this.$tree().yqTree(enabled ? "btnEnable" : "btnDisable", "save");
            },
            check: function (ids) {
                if (!this.binding) return;

                const nodes = this.$tree().yqTree("getRoots");
                nodes.forEach(node => this.$tree().yqTree("uncheck", node.id));

                if (!ids) return;

                ids.split(",").forEach(id => this.$tree().yqTree("check", id));
            }
        }
    </script>

</body>

</html>